<template>
	<view class="Accessbody">
		<view  v-if="hasCustomer" class="hasCustomer">
			<u-search placeholder="请输入搜索内容" v-model="DoorName" :show-action="true" action-text="搜索" @custom='Search' @search='Search'></u-search>
			<view class="box_cell">
				<u-cell-item v-for="(item,index) in DoorList" :key='index' :border-bottom='true' :value-style="{width:'80rpx,height:60rpx'}"
				 :arrow='false' :title="item.DoorName" :label='item.LctnName' @click.prevent= 'DoorItemClick(item)'>
					<view slot="right-icon">
						<text>{{item.Online?'在线':'离线'}}</text>
						<!-- {{index}} -->
						<u-icon size="50" color="#ffc338" :name="item.Activity?'star-fill':'star'" @click.native.stop="starClick(item,index)"></u-icon>
					</view>
				</u-cell-item>
			</view>
		</view>
		<view v-else class="hasCustomer">

			<!-- loading -->
			<!-- {{windowHeight}} -->
			<view v-if="!AddCustomer" :style="{'margin-top': (windowHeight/2 - 150) + 'px'}" class="loading">
				<u-loading style=" margin-left: 300rpx;" mode="flower" size="150"></u-loading>
			</view>
			<!-- 添加套账 -->
			<view v-else class="AddCustomer" :style="{'padding-top': (windowHeight/2 - 150) + 'px','text-align': 'center'}">
				<view style="text-align: center;font-size: 50upx;color: #ff5500;font-weight: 600;margin-bottom: 20upx;">
					当前没绑定账套,请添加账套 
				</view>
				<u-button type="success" size="medium" @click="AddCustomerFun">添加账套</u-button>
				<view style="height: 50upx;"></view>
				<u-button type="success" size="medium" @click="resfsh">刷新</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import http from '../../common/vmeitime-http/index.js';
	export default {
		data() {
			return {
				hasCustomer: false,
				AddCustomer: false,
				windowHeight: '',
				keyword: '',
				DoorList: [],
				DoorName:''
			}
		},
		methods: {
			// 刷新
			resfsh() {
				this.hasCustomer = false
				this.AddCustomer = false
				this.getData()
			},
			getData() {
				http.GetCustomerList().then(res => {
					this.AddCustomer = true;
					if (res.data.customerlist.length) {
						this.hasCustomer = true;
						http.GetDoorList().then(res => {
							console.log(res.data)
							this.DoorList = res.data.doorlist
						})
					} else {
						this.hasCustomer = false;
					}
				}).catch(err => {
					
					this.AddCustomer = false;
				})
			},
			starClick(item, idx) {
				let parma = {
					DoorID: item.DoorID,
					CustomerID: item.CustomerID,
					isActivity: !item.Activity
				}
				this.DoorList[idx].Activity = !item.Activity;
				// this.DoorList = [...[],...this.DoorList]
				let data = [...this.DoorList];
				
				http.DoorActivity(parma).then(res => {
					http.GetDoorList().then(res => {
						console.log(res.data)
						this.DoorList = res.data.doorlist?res.data.doorlist:[]
					})
				})
			},
			DoorItemClick(item){
				let parma = JSON.stringify(item)
				uni.navigateTo({
				    url: `../openDoor/openDoor?item=${parma}`
				});
			},
			//
			AddCustomerFun(){
				uni.navigateTo({
				    url: '../AddPerson/AddPerson'
				});
			},
			ARR_Remove_Duplicates(Arr, key) {
			  let obj = {}
			  let points = Arr.reduce(function (item, next) {
			    obj[next[key]] ? '' : obj[next[key]] = true && item.push(next);
			    return item;
			  }, [])
			  return points
			},
			Search(){
				
				http.GetDoorList({DoorName:this.DoorName,
					DoorName_oper:'like'
				}).then(res => {
					// console.log(res.data);
					// let datas = [...(res.data?res.data:[]),...this.DoorList];
					// console.log(datas)
					// let data = ARR_Remove_Duplicates(datas,'DoorID');
					// console.log(data)
					this.DoorList = res.data.doorlist?res.data.doorlist:[];
				})
					
			}
		},
		created() {
			console.log(1)

		},
		onShow() {
			console.log(3)
			this.getData();
		},
		onReady() {
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.windowHeight = windowHeight;
			console.log(2)


		}
	}
</script>

<style lang="scss" scoped>
	.Accessbody {
		width: 700rpx;
		height: 100%;
		margin-left: 25rpx;
		padding-top: 10px;
		box-sizing: border-box;
		.hasCustomer{
			height: 100%;
			width: 100%;
			.box_cell{
				margin-top: 5px;
				height: calc(100% - 42px);
				overflow-y: auto;
			}
		}
	}
</style>
